<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col items-center text-wrapper b-p-w-z">
				<text class="text_1">其他品类商品需要返回主页继续询价</text>
			</view>

			<view class="flex-row section_1">
				<image :src="brand.brandUrl" class="image_1" />
				<text class="text_2">{{brand.brandName}}</text>
			</view>
			<view class="flex-col group_1">
				<view class="flex-col ">
					<view class="flex-col section_2 u-m-t-20" v-for="(item,index) in list" :key="index">
						<view class="flex-row group_8">
							<text class="text_19">产品名称</text>
							<view class="text_4" style="width:220px ">
								<u-input border="none" placeholder="请输入产品名称" maxlength="30" clean
									v-model="item.productName"></u-input>
							</view>
						</view>
						<image @click="del(index)"
							src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827920236464220.png"
							class="image_9" />
						<view class="flex-col group_9">
							<view class="flex-row group_4">
								<text class="text_5">上传资料</text>
								<!-- <text class="text_7">产品图片</text> -->
								<u-radio-group v-model="item.choiceId" size="36" iconSize="25"
									style="margin-left: 39rpx;">
									<u-radio :customStyle="{marginRight: '18px'}" v-for="(item, i) in radiolist1"
										:key="i" labelSize="30" :label="item.name" :name="item.value">
									</u-radio>
								</u-radio-group>

							</view>
							<view class="flex-row group_6" v-if="item.choiceId==0">
								<text class="text_11">产品图片</text>
								<view class="u-m-l-20">
									<shop-upload :fileList="item.detailedPictures" @success="success($event,index)"
										@del="delpic($event,index)">
									</shop-upload>
								</view>

							</view>
							<view class="flex-row group_8" v-if="item.choiceId==1">
								<text class="text_19">规格</text>
								<view class="text_4" style="width:220px ">
									<u-input border="none" placeholder="请输入规格" maxlength="30" clean
										v-model="item.specificationsId"></u-input>
								</view>
							</view>
							<view class="flex-row group_8" v-if="item.choiceId==1">
								<text class="text_19">型号</text>
								<view class="text_4" style="width:220px ">
									<u-input border="none" placeholder="请输入型号" maxlength="30" clean
										v-model="item.materialModelId"></u-input>
								</view>
							</view>
							<view class="" v-if="item.choiceId==0">
								<text class="text_13">备注</text>

								<view class="flex-col u-m-t-20">
									<!-- <textarea height="40" v-model="item.remarks" placeholder="请输入备注" placeholder-style="background:#F5F6F8; padding:10rpx"  /> -->
									<!-- <u-textarea height="180" v-model="item.remarks"  placeholder="请填写相关使用情况" ></u-textarea> -->
									<u-textarea height="150" confirmType="done" v-model="item.remarks"
										placeholder="请填写相关使用情况" ref="textarea"></u-textarea>
								</view>
							</view>


							<text class="text_17">请清晰展示规格型号或填入产品名称、规格、型号。</text>
						</view>
					</view>

				</view>
			</view>
			<view class="flex-col group_10">
				<view class="flex-col items-center text-wrapper_2" @click="add"><text class="text_28">+新增产品</text>
				</view>
				<view class="flex-col items-center button" @click="submit"><text class="text_29">确认</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from "lodash"
	export default {
		components: {},
		data() {
			return {
				materialTypeName: '',
				materialTypeId: '',
				brandName: '',
				brand: [],
				brand_id: 0,
				list: [{
					brandId: 0,
					detailedPictures: [],
					materialModelId: '',
					specificationsId: '',
					productName: '',
					remarks: '',
					choiceId: 0,
				}],
				value1: '',
				value: '',
				radiovalue1: '',
				radiolist1: [{
						name: '产品图片',
						value: 0
					},
					{
						name: '规格、型号',
						value: 1
					},
				],
				iptLength: null
			}
		},
		onLoad(option) {


			if (option.hasOwnProperty('i') && option.hasOwnProperty('materialTypeId') && option.hasOwnProperty(
					'brand_id')) {
				this.brand = uni.getStorageSync('brand')[option.i];
				console.log('sd', this.brand);
				this.brand_id = option.brand_id;
				this.brandName = this.brand.brandName;
				this.materialTypeId = option.materialTypeId;
				let materialType = uni.getStorageSync('materialTypes');
				let havedata = false;
				let index = -1;
				materialType.map((item, i) => {
					if (item.materialTypeId == option.materialTypeId) {
						index = i;
					}
				})

				if (index > -1) {
					this.materialTypeName = materialType[index].materialTypeName;

				}

				let detailedLists = uni.getStorageSync('detailedLists');

				if (detailedLists) {
					let index = -1;
					detailedLists.map((it, i) => {
						if (it.materialTypeId == option.materialTypeId) {
							index = i;
						}
					})

					if (index != -1) {
						if (detailedLists[index].brand) {
							detailedLists[index].brand.map((it2, i2) => {

								if (it2.brandId == option.brand_id) {
									this.list = detailedLists[index].brand[i2].list;

									this.list.forEach((it3, ii3) => {
										let pic = [];
										it3.detailedPictures.map((it4, ii4) => {
											pic.push({
												url: it4.detailedPictureUrl
											})
										});
										it3.detailedPictures = pic;
									})
									havedata = true;
								}
								console.log(this.list);
							})
						}
					}

				}
				// console.log('list');
				// console.log(this.list);
				if (!havedata) {
					this.list[0].brandId = this.brand_id;
					this.list[0].brandName = this.brandName;
					this.list[0].materialTypeId = this.materialTypeId;
				}
			}

		},

		methods: {

			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},

			del(index) {
				this.list.splice(index, 1)
			},
			success({
				url
			}, index) {
				let item = this.list[index];
				item.detailedPictures.push({
					url: url
				});
				this.$set(this.list, index, item)
			},
			delpic(i, index) {

				let item = this.list[index];
				item.detailedPictures.splice(i, 1)
				this.$set(this.list, index, item)

			},
			add() {
				this.list.push({
					productName: '',
					detailedPictures: [],
					choiceId: 0,
					remarks: '',
					specificationsId: '',
					materialModelId: '',
					brandId: this.brand_id
				})
			},
			// 确认按钮
			submit() {

				// if (this.list.length == 0) {
				// 	return this.$u.toast('请添加您要咨询的主材')
				// }
				let obj = {}

				this.list.forEach((it, ii) => {
					obj = it
					let pic = []
					it.detailedPictures.map((it4, ii4) => {
						pic.push({
							detailedPictureUrl: it4.url
						})
					});
					it.detailedPictures = pic;

				})
				// 增加限制
				if (obj.productName == '') {
					console.log(obj);
					return this.$u.toast('请输入产品名称')
				}
				if(obj.choiceId == 1) {
					if(obj.materialModelId == '') {
						return this.$u.toast('请输入产品型号')
					}else if(obj.specificationsId == '') {
						return this.$u.toast('请输入产品规格')
					}
				}
				
				// console.log('submit');
				// console.log(this.list);
				// return ;
				let lists = uni.getStorageSync('detailedLists') || [];
				console.log('lists', lists);
				let index = _.findIndex(lists, {

					materialTypeId: this.materialTypeId
				});


				//判断品类是否存在
				if (index > -1) {
					let i = -1;
					lists[index].brand.map((it, ii) => {
						if (it.brandId == this.brand_id) {
							i = ii
						}
					})

					if (i > -1) {
						lists[index].brand[i].list = this.list;
					} else {
						lists[index].brand = lists[index].brand || [];
						lists[index].brand.push({
							brandId: this.brand_id,
							brandName: this.brandName,
							brandUrl: '',
							list: this.list,
						})
					}

				} else {
					console.log(22);
					let option = {
						materialTypeId: this.materialTypeId,
						materialTypeName: this.materialTypeName,
						brand: [{
							brandId: this.brand_id,
							brandName: this.brandName,
							list: this.list,
						}]
					}
					lists.push(option);


				}
				uni.setStorageSync('detailedLists', lists)

				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	/* .scroll {
		height: calc(100vh - 450rpx);
	} */
	::v-deep uni-textarea {
		width: 100%;
	}

	.section_2 {
		padding: 0 11.5px;
		background-color: #ffffff;
		border-radius: 8px;
		position: relative;
	}

	.group_4 {
		padding: 15px 0 18px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_6 {
		padding: 15px 0 16px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.text-wrapper_1 {
		margin-top: 16.5px;
		padding: 11px 0 49px;
		background-color: #f6f7f9;
		border-radius: 8px;
	}

	.image_5 {
		margin-left: 19.5px;
		margin-top: 3px;
		border-radius: 8px;
		width: 78px;
		height: 78px;
	}

	.image-wrapper {
		margin-left: 12px;
		margin-top: 3px;
		padding: 23.25px 0;
		border-radius: 8px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826983491283699.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 78px;
		height: 78px;
	}

	.image_3 {
		margin-top: 3px;
		flex-shrink: 0;
		border-radius: 50%;
		width: 16px;
		height: 16px;
	}

	.image_7 {
		width: 31.5px;
		height: 31.5px;
	}

	.text_11 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_13 {
		margin-top: 15px;
		align-self: flex-start;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_17 {
		margin-top: 10.5px;
		align-self: flex-start;
		color: #ff371d;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	/deep/.b-s {
		background-color: #55aaff;
	}

	.text_5 {
		margin-bottom: 2.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_7 {
		margin-left: 43.5px;
		margin-bottom: 2.5px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_5 {
		margin-left: 31.5px;
	}

	.text_15 {
		margin-left: 12px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_9 {
		margin-left: 8px;
		margin-bottom: 2.5px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.page {
		background-color: #f6f7f9;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		flex: 1 1 auto;
	}

	.text-wrapper {
		height: 80rpx;
		background-color: #ffffffff;
	}

	.b-p-w-z {
		background-color: #fff2df;
		position: fixed;
		width: 100vw;
		z-index: 2;
	}

	.section_1 {
		margin-top: 80rpx;
		padding: 13px 13px;
		background-color: #ffffffff;
	}

	.group_1 {
		padding: 12px 12px 0;
	}

	.text_1 {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: #ff9d00;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		letter-spacing: 0.6px;
	}

	.image_1 {
		border-radius: 30px;
		width: 40px;
		height: 40px;
	}

	.text_2 {
		margin-left: 12px;
		margin-top: 9px;
		font-weight: bold;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.group_7 {
		padding-top: 16.5px;
	}

	.image_2 {
		width: 24px;
		height: 20px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.group_2 {
		padding: 21.5px 0 20.5px;
		border-bottom: solid 0.5px #eeeeee;
		position: relative;
	}

	.group_3 {
		padding-bottom: 13px;
		position: relative;
	}

	.group_10 {
		padding: 16px 0 20px 4px;
	}

	.text_3 {
		display: flex;
		align-self: center;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		/* line-height: 16.5px; */
	}

	.text_4 {
		margin-left: 19.5px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_8 {
		padding: 15px 0 20.5px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.image_9 {
		border-radius: 0px 8px 0px 8px;
		width: 24px;
		height: 20px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.group_9 {
		padding-bottom: 19.5px;
		position: relative;
	}

	.text-wrapper_2 {
		margin-right: 5%;
		padding: 13rpx 13rpx;
		align-self: flex-end;
		border-radius: 22px;
		border: 1px #1d6aff solid;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100px;
	}

	.button {
		display: flex;
		justify-content: center;
		margin-right: 25rpx;
		margin-left: 25rpx;
		margin-top: 24px;
		width: 686rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 22px;
	}

	.text_19 {
		display: flex;
		align-self: center;
		color: #333333;
		font-size: 14px;
	}

	.text_20 {
		margin-left: 19.5px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_28 {
		color: #1d6aff;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';

	}

	.text_29 {
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		// line-height: 19px;
	}
</style>
